<template>
  <view class="wai">
    <scroll-view style="height: 100vh" @scrolltolower="onScrollToLower" scroll-y="true">
      <view class="yaoq">
        <view class="">{{ title }}</view>
      </view>
      <!-- 更改1 -->
      <view class="xiaji">
        <view class="count">
          <view>邀请下级总人数:</view>
          <text style="color: #0081ff">{{ total }}</text>
        </view>
        <view class="count">
          <view>累计奖励(元):</view>
          <text style="color: #0081ff">{{ money }}</text>
        </view>
      </view>
      <!-- 更改1 -->
      <view class="lieb" v-for="(it, index) in dataValue" :key="index">
        <view class="libiao">
          <image class="image" :src="httpurl + '/static/uniapp/img/default-avatar.png'" mode=""></image>
          <view class="fles">
            <view class="">{{ it.user.mobile.slice(0, 3) + (it.user.mobile.length > 6 ? '*'.repeat(it.user.mobile.length - 6) : '') + it.user.mobile.slice(2, 6) }}</view>
            <!-- <view class="">{{ it.user.mobile }}</view> -->

            <view class="">{{ it.user.create_time }}</view>
          </view>
        </view>
        <view class="money">
          <view>
            佣金(元):
            <text style="color: #0081ff">{{ it.money }}</text>
          </view>
        </view>
      </view>
      <view class="flexa" v-if="total < 1">
        <image :src="httpurl + '/static/uniapp/img/ht.png'" mode="scaleToFill"></image>
        <text class="font26" style="color: #606060">暂时没有邀请好友</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1, //当前页数
      total: 0, //总人数
      dataValue: [], //邀请列表
      flag: 'false', //控制是否发起请求
      httpurl: '', //图片链接
      money: '', //总金额
      title: '' //宣传文字
    };
  },

  onLoad() {
    var that = this;
    this.tid = that.app.id;
    // 下级列表
    this.xjList();
  },
  onShow() {
    var that = this;
    this.tid = that.app.id;
    this.httpurl = this.app.httpUrl;
    this.getAssetsa(); //推广数据
  },

  // 监听 page 的变化，触发函数
  watch: {
    // 监听 page 属性的变化
    page(newVal, oldVal) {
      // 当 page 发生变化时，调用 xjList 方法
      // this.xjList();
      this.getAssetsa();
    }
  },
  methods: {
    // 推广数据
    getAssetsa() {
      var that = this;
      if (this.flag == true) return that.app.showMsg('没有更多了！');
      uni.showLoading({
        title: '加载中',
        mask: true
      });

      uni.request({
        url: that.app.apiHost + `/getAssets?page=${this.page}`,
        method: 'GET',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (res) => {
          if (res.data.code == 1) {
            this.money = res.data.data.totalMoney; //累加金额
            this.title = res.data.data.description; //宣传文字
            console.log(8888999, res.data);
            this.dataValue = [...this.dataValue, ...res.data.data.data.data]; //列表
            this.total = res.data.data.data.total;
            that.app.showMsg('加载成功！');
            if (res.data.data.data.last_page >= this.page) {
              this.flag = false;
            } else {
              this.flag = true;
            }
          } else {
            that.app.showMsg('加载失败！');
          }
          // 关闭加载提示
          uni.hideLoading();
        },
        fail(res) {}
      });
    },

    // 滑动到底部触发
    onScrollToLower() {
      this.page++;
      console.log(this.page);
    }
  }
};
</script>

<style lang="scss" scoped>
.wai {
  .flexa {
    margin-top: 100rpx;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column; /* 更改主轴为垂直方向 */
  }
  .lieb {
    display: flex;
    background-color: #f7f7f7;
    justify-content: space-between;
    margin-top: 20rpx;
    .libiao {
      display: flex;
      padding: 23rpx 0;
      border-radius: 15rpx;
      .image {
        margin-right: 46rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      // 佣金盒子
      .money {
        display: flex;
        margin-left: 100rpx;
        color: #0081ff;
      }
    }
  }
  .yaoq {
    // text-align: center;
    background-color: #f7f7f7;
    padding: 30.77rpx;
    border-radius: 15rpx;
    font-size: 30rpx;
    height: 160rpx;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
    -webkit-line-clamp: 3; //内容限制的行数
  }
  .xiaji {
    padding: 30rpx;
    background-color: #f7f7f7;
    margin-top: 30rpx;
    border-radius: 15rpx;
    display: flex;
    justify-content: space-between;
    .count {
      // text-align:center ;
      display: flex;
      padding: 20rpx 0 20rpx 0;
    }
  }
  padding: 30.77rpx;
  // height: 100vh;
}
</style>
